<template>
   <div class="end">

      <div class="end_top">
          <div class="end_top_left">
              <p>网友点评（19264）</p>
          </div>
          <div class="end_top_right">
              <span class="iconfont enter"> &#xe602;</span>
          </div>
      </div>

      
      <div class="end_body_box"> 
          <div class="end_body">

               <div class="end_body_left"> 
                   <div class="avatar"> 
                       <img src="https://img.meituan.net/122.74/avatar/1a7d46cf9713b65ddd3201d4163e630b62861.jpg"> 
                    </div> 
               </div> 

               <div class="end_body_right">
                    <div> 
                        <span class="username">shero-95</span>
                         <span class="level level-0"></span> 
                         <span class="pub-time">2019-05-07</span>
                     </div> 
                     
                <div class="score"> 
                    <span>打分</span>

                     <div class="hue-star"> 
                         <div class="hue-star-top" style="width: 80%;">
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i>
                              <i class="hue-icon">★</i>
                         </div>

                         <div class="hue-star-bottom"> 
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i>
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i>
                         </div>
                     </div>
                </div> 
                
                <div class="end-text"> 
                    <div class="hue-block-whitespace"> 
                        <p class="hue-ellipsis-l2">看了大熊猫开车过来只用了十几分钟，十一点时候到的庄园，边走边拍竟不自觉玩了四个小时，出去的时候已经下午三点，没有遇上评论里说的下漫天花雨有点失望==原谅我是个自恋狂发布的照片有点多==庄园里坡顶上有卖吃的，面条和豆腐味道还可以。比成都其它看花的庄园好的是不用爬楼梯，一段一段的小坡路而且周围都有花边走边拍。里面还有小动物园和小游乐场，小朋友肯定喜欢。</p> 
                    </div> 
                    
                    <div class="pic-wrapper">
                         <img class="yl-img" src="https://p0.meituan.net/152.0/shaitu/282259471f214564fd97a2208d9598e91657236.jpg" lazy="loaded">
                         <img class="yl-img" src="https://p0.meituan.net/152.0/shaitu/ab49c0b2a8ae4e684d14d690f4746c43501808.jpg" lazy="loaded">
                         <img class="yl-img" src="https://p0.meituan.net/152.0/shaitu/e3bd29134d757f981d2f2c553ac29b4b1801864.jpg" lazy="loaded">

                     <div class="pic-number">9</div> 

                     </div>
                     
                      <div class="info"> 浏览 73791 </div> 
                </div> 
            </div>

         </div> 
     </div>

<div class="end_body_box"> 
          <div class="end_body">

               <div class="end_body_left"> 
                   <div class="avatar"> 
                       <img src="https://img.meituan.net/122.74/avatar/d513fe4d72aefcd5e07ea2835b312a5a168399.jpg"> 
                    </div> 
               </div> 

               <div class="end_body_right">
                    <div> 
                        <span class="username">山扶山扶</span>
                         <span class="level level-0"></span> 
                         <span class="pub-time">2019-6-16</span>
                     </div> 
                     
                <div class="score"> 
                    <span>打分</span>

                     <div class="hue-star"> 
                         <div class="hue-star-top" style="width: 80%;">
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i>
                              <i class="hue-icon">★</i>
                         </div>

                         <div class="hue-star-bottom"> 
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i>
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i> 
                              <i class="hue-icon">★</i>
                         </div>
                     </div>
                </div> 
                
                <div class="end-text"> 
                    <div class="hue-block-whitespace"> 
                        <p class="hue-ellipsis-l2"><p class="hue-ellipsis-l2">早就想去了，但是因为比较远，所以之前一直没机会去，这次休假去看了一下，哇好多人啊，花挺好看的，玻璃栈道是第一次去，刚上去的时候挺害怕走了一段就好了，前面有好多小姐姐拍照啊，里面有个买菠萝和哈密瓜的阿姨，超好吃哦，去的宝宝可以尝一下哈哈，漫画庄园是个拍照得好地方  推荐大家去看看</p> 
                    </div> 
                    
                    <div class="pic-wrapper">
                        <img class="yl-img" src="https://p0.meituan.net/152.0/shaitu/e6846effb25cea1e103ffdd680ddc467633058.jpg" lazy="loaded">
                        <img class="yl-img" src="https://p1.meituan.net/152.0/shaitu/60f1e22891003c409c09b2911a8e55da600685.jpg" lazy="loaded">
                        <img class="yl-img" src="https://p1.meituan.net/152.0/shaitu/69154a84e6fe8ec10e59987430a14201544599.jpg" lazy="loaded">
                     <div class="pic-number">4</div> 

                     </div>
                     
                      <div class="info"> 浏览 6446 </div> 
                </div> 
            </div>

         </div> 
     </div>





   </div>




</template>














<style scoped>
.end{
    height: 300px;
    width: 100%;
}
.end_top {
   
    width: 100%;
    background-color: #fff;
    position: relative;
    padding: .16rem .2rem;
    height: 30px;
    border-bottom: 1px solid #e5e5e5;
    color: #333;
    vertical-align: middle;
    text-align: left;
    overflow: inherit;
    display: box;
    display: flex;
    box-align: center;
    align-items: center;
}
.end_top_left{
    width: 330px;
    
}
.end_top_right{
    width: 50px;
   
    
}
.end_top_right span.enter{
  color: #999;
  font-size: 25px;
  line-height: 1rem;
 float: right;
}
.end_body_box{
   
    position: relative;
    padding: .16rem .2rem;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
    color: #333;
    vertical-align: middle;
    margin-left: 0px;
    margin-right: 0px;
    text-align: left;
    overflow: inherit;
    display: -webkit-box;
    display: -webkit-flex;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    box-align: center;
    align-items: center;
}

.end_body{
   
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: top;
    justify-content: top;
    -webkit-box-align: start;
    align-items: flex-start;
    white-space: normal !important;
}

.end_body_left{
   
    -webkit-box-flex: 1;
    flex: 1;
    width: 16.66%;
}

.avatar {
    width: 0.96rem;
    height: 0.96rem;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
}
 .avatar img {
    width: 100%;
    height: 100%;
}
.end_body_right{
  
    -webkit-box-flex: 5;
    flex: 5;
    width: 83.33%;
}

.username{
  
    color: #446889;
    font-size: 18px;
}
 .pub-time {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 0.2rem;
}
 .score span {
    font-size: 15px;
    color: #333;
}
.score .hue-star {
    font-size: 18px;
}
.hue-star {
    position: relative;
    display: inline-block;
    padding: 0;
    color: #f90;
}
.hue-star-top {
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0px;
}
.hue-star .hue-icon {
    font-size: 0.32rem;
}
.hue-icon {
    display: inline-block;
    font-family: hue icons;
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.hue-star-bottom {
    z-index: 0;
    color: #999;
    font-size: 0px;
}
 .end-text {
    margin-top: 0.15rem;
}
.hue-block-whitespace {
    color: #666;
}
 .end-text p {
    color: #333;
    margin-bottom: 0.1rem;
}
.hue-ellipsis-l2, .hue-ellipsis-l3 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
}
.hue-ellipsis-l2 {
    -webkit-line-clamp: 2;
    font-size: 17px;
}
    /* 
    -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box：必须结合的属性?，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient：?必须结合的属性?，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow：可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
-webkit-line-clamp：<number>?number用于显示的行数
-webkit-box-orient 默认是水平的，当值设为vertical时为垂直排列

     */

 .pic-wrapper {
    position: relative;
}
  .end-text .yl-img {
    width: 1.52rem;
    height: 1.52rem;
    margin-right: 0.12rem;
    margin-bottom: 0.12rem;
}
 .end img {
    vertical-align: middle;
}
.end .pic-wrapper .pic-number {
    position: absolute;
    top: 1.1rem;
    left: 4.4rem;
    width: 0.3rem;
    height: 0.35rem;
    line-height: 0.35rem;
    background: #000;
    color: #fff;
    border-radius: 40%;
    text-align: center;
    font-size: 0.24rem;
    font-weight: 700;
}
.end .pic-wrapper .pic-number {
    position: absolute;
    top: 1.1rem;
    left: 4.4rem;
    width: 0.3rem;
    height: 0.35rem;
    line-height: 0.35rem;
    background: #000;
    color: #fff;
    border-radius: 40%;
    text-align: center;
    font-size: 0.24rem;
    font-weight: 700;
}
 .end-text .info {
    font-size: 0.25rem;
    color: #999;
    line-height: 0.6rem;
}




</style>